<template>
	<view class="my-wrong">
		<!-- 我的错题 -->
		<view class="block" v-if="dataObj.list.length">
			<!-- 列表 -->
			<view class="list">
				<view class="item" v-for="item in dataObj.list" :key="item.goods_id" @click="onPageTap(item)">
					<!-- 选中 -->
					<view
						class="select"
						:class="item.selected ? 'selected' : ''"
						v-if="pageObj.manage"
						@click="item.selected = !item.selected">
					</view>
					<!-- 内容 -->
					<view  class="content">
						<image class="cover" :src="item.image_url"></image>
						<view class="title ellipsis-2">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部删除 -->
		<view class="footer" v-if="pageObj.manage">
			<view class="select-all" :class="pageObj.isALL ? 'selected' : ''" @click="onSelectAllTap">全选</view>
			<view class="number">共选中 {{sum}} 门</view>
			<view class="btn" @click="onDelTap">删除</view>
		</view>
	</view>
</template>

<script>
	import progressBar from '@/components/progress-bar/progress-bar.vue';
	
	export default {
		components: {
			progressBar
		},
		data() {
			return {
				pageObj: {
					manage: false,
					isALL: false
				},
				dataObj: {
					list: []
				},
			}
		},
		computed: {
			// 选中商品数量
			sum: function() {
				if (!this.pageObj['manage']) return 0;
				let sum = 0;
				const list = this.dataObj['list']; // 获取操作的数组
				for(let i in list){
					const item = list[i];
					if (item['selected']) {
						sum++;
					}
				}
				return sum;
			}
		},
		onLoad() {
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 管理事件
			onManageTap() {
				// 处理管理字段
				this.pageObj['manage'] = !this.pageObj['manage'];
			},
			// 题目详情
			onPageTap(item) {
				uni.navigateTo({
					url: './exam-list?id=' + item['goods_id'] + '&type=3' + '&title=' + item['name']
				});
			},
			// 全选
			onSelectAllTap() {
				const list = this.dataObj['list']; // 获取操作的数组
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				for(let i in list){
					if (!list[i]['selected']) {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = true;
					for(let i in list){
						list[i]['selected'] = true;
					}
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = false;
					for(let i in list){
						list[i]['selected'] = false;
					}
				}
			},
			// 删除
			onDelTap() {
				const list = this.dataObj['list'];
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['user']['getmy'],
					data: {
						cat_type: 4 // 1课程 2培训 3书籍 4题库 5充值
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['list'] = data || [];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.my-wrong{
		padding-top: 18rpx;
		// padding-bottom: 90rpx;
		.block{
			.header{
				line-height: 44rpx;
				font-size: 32rpx;
				color: #1A1A1A;
				.btn{
					float: right;
					position: relative;
					padding-left: 42rpx;
					color: $color-common;
				}
				.manage{
					color: #373737;
					&::before{
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 32rpx;
						height: 44rpx;
						background-repeat: no-repeat;
						background-position: center;
						background-size: 32rpx 32rpx;
						background-image: url(../../../static/images/common/manage.png);
					}
				}
			}
		}
		// 视频列表
		.list{
			.item{
				display: flex;
			}
			.select{
				width: 62rpx;
				height: 70rpx;
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 40rpx 40rpx;
				background-image: url(../../../static/images/cart/select.png);
			}
			.selected{
				background-image: url(../../../static/images/cart/selected.png);
			}
			.content{
				flex: 1;
				position: relative;
				padding: 30rpx 0 76rpx 278rpx;
				.cover{
					position: absolute;
					top: 30rpx;
					left: 0;
					width: 254rpx;
					height: 156rpx;
					background-color: #eee;
					border-radius: 14rpx;
				}
				.title{
					height: 80rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #1A1A1A;
					margin-bottom: 16rpx;
				}
				.btns{
					height: 60rpx;
					font-size: 0;
					text-align: right;
					.test, .exam{
						box-sizing: border-box;
						display: inline-block;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						text-align: center;
						border-radius: 10rpx;
						margin-left: 30rpx;
					}
					.test{
						color: $color-common;
						border: 1rpx solid $color-common;
					}
					.exam{
						color: #FFFFFF;
						background-color: $color-common;
					}
				}
				.expire{
					position: absolute;
					bottom: 18rpx;
					left: 0;
					line-height: 40rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					padding-left: 40rpx;
					&::before{
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 40rpx;
						height: 40rpx;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 29rpx 29rpx;
						background-image: url(../../../static/images/classify/clock.png);
					}
				}
			}
		}
		
		.footer{
			box-sizing: border-box;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 10rpx 200rpx 10rpx 36rpx;
			background-color: #FFFFFF;
			.select-all{
				float: left;
				position: relative;
				line-height: 70rpx;
				width: 66rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding-left: 48rpx;
				margin-right: 14rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -20rpx;
					left: 0;
					width: 40rpx;
					height: 40rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100%;
					background-image: url(../../../static/images/cart/select.png);
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -18rpx;
					right: 0;
					width: 1rpx;
					height: 36rpx;
					background-color: #E4EAED;
				}
			}
			.selected{
				&::before{
					background-image: url(../../../static/images/cart/selected.png);
				}
			}
			.number{
				line-height: 70rpx;
				font-size: 26rpx;
				color: #7F7F7F;
			}
			.btn{
				position: absolute;
				top: 10rpx;
				right: 36rpx;
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: #373737;
				border-radius: 35rpx;
			}
		}
	}
</style>
